<template>
  <a-form-item
    :label="props.itemData.label"
    :name="props.itemData.name"
    v-bind="validateInfos[props.itemData.value]"
  >
    <a-input
      v-if="props.itemData.type == 'text'"
      :disabled="props.itemData.disabled"
      placeholder="请输入"
      allow-clear
      autocomplete="off"
      v-model:value.string="dataValue"
      @blur="inputUpdateValue"
    />
    <a-input
      v-if="props.itemData.type == 'number'"
      type="number"
      :disabled="props.itemData.disabled"
      placeholder="请输入"
      allow-clear
      autocomplete="off"
      v-model:value="dataValue"
      @blur="inputUpdateValue"
    />
    <a-select
      v-if="
        props.itemData.type == 'selectajax' || props.itemData.type == 'select'
      "
      optionFilterProp="label"
      :options="props.itemData.options"
      allow-clear
      autocomplete="off"
      placeholder="请选择"
      v-model:value.string="dataValue"
      @change="updateValue"
    />
    <a-select
      v-if="props.itemData.type == 'selectajaxlike'"
      optionFilterProp="label"
      :options="props.itemData.options"
      :filter-option="filterOption"
      show-search
      allow-clear
      autocomplete="off"
      placeholder="请选择"
      v-model:value.string="dataValue"
      @change="updateValue"
    />
    <a-date-picker
      style="width: 100%"
      v-if="props.itemData.type === 'date'"
      value-format="YYYY-MM-DD HH:mm:ss"
      show-time
      autocomplete="off"
      placeholder="请选择日期"
      v-model:value="dataValue"
      @change="dateUpdateValue"
    />
    <a-radio-group
      v-model:value="dataValue"
      @change="changeRadio"
      v-if="props.itemData.type === 'radio'"
    >
      <a-radio
        :value="item.value"
        v-for="(item, index) in props.itemData.params"
        :key="index"
        >{{ item.label }}</a-radio
      >
    </a-radio-group>

    <a-upload
      v-if="props.itemData.type === 'image'"
      name="attachment"
      v-model:file-list="images"
      :action="uploadUrl"
      :limit="1"
      list-type="picture-card"
      @change="uploadHandler"
      :show-upload-list="false"
    >
      <img v-if="imageUrl" :src="imageUrl" style="width: 100%" alt="example" />
      <div v-else>
        <loading-outlined v-if="loading" />
        <plus-outlined v-else />
        <div class="ant-upload-text">上传图片</div>
      </div>
    </a-upload>
  </a-form-item>
</template>

<script setup>
  import { ref, reactive, onMounted, watch  } from 'vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';
  import { uploadUrl } from '@/config/setting';

  const props = defineProps({
    itemData: Object,
    dataValue: [String, Number],
    validateInfos: Object,
    thumb_url: String
  });
  const emit = defineEmits([
    'update:value',
    'blur',
    'getImg',
    'getImgUrl',
    'getSeriesStyle',
	'get_subclass',
  ]);
  const dataValue = ref(null);
  const loading = ref(false);
  const imageUrl = ref('');
	
	
  if (props.dataValue) {
    dataValue.value = props.dataValue;
  }
  watch(
    () => [props.dataValue, props.thumb_url],
    (newValue, oldValue) => {
      dataValue.value = newValue[0];
      if (newValue[1]) {
        imageUrl.value = newValue[1];
      }
    }
  );

  // 头像上传
  const images = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    loading.value = true;
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      if (props.itemData.value == 'thumb') {
        imageUrl.value = data.path;
        let obj = {};
        obj[props.itemData.value] = data.id;
        emit('getImg', obj);
        emit('getImgUrl', { url: imageUrl.value });
      }
      loading.value = false;
    }
  };

  //下拉框带搜索功能
  const filterOption = (input, option) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const inputUpdateValue = () => {
    emit('update:value', dataValue.value);
  };
  /* select选择框值改变事件 */
  const updateValue = () => {
    emit('update:value', dataValue.value);
   if (props.itemData.value == 'series_code') {
      emit('getSeriesStyle', dataValue.value);
    }else if (props.itemData.value == 'class_code') {
      emit('get_subclass', dataValue.value);
    }
  };
  const dateUpdateValue = (value, dateString) => {
    emit('update:value', dataValue.value);
  };
  const changeRadio = () => {
    emit('update:value', dataValue.value.toString());
  };
</script>

<style lang="less" scoped></style>
